<template>
	<div>
		<div style="text-align: center">
			<el-input v-model="username" placeholder="用户名" style="width: 20%;margin-right: 20px"></el-input>
			<el-input v-model="phone" placeholder="手机号" style="width: 20%;margin-right: 20px"></el-input>
			<template>
				<el-select v-model="value" placeholder="请选择" style="margin-right: 20px" @change="change">
					<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
					</el-option>
				</el-select>
			</template>
			<el-button type="primary" icon="el-icon-search" v-on:click="limit_user" style="height: 40px">搜索
			</el-button>
			<el-button type="primary" style="width: 100px;height: 40px" v-on:click="empty">清空</el-button>
		</div>
		<el-table
				v-loading="loading"
				:data="tableData"
				height="505"
				border
				style="width: 908px;margin: 20px auto;">
			<el-table-column
					fixed="left"
					prop="user"
					label="用户名"
					width="200">
			</el-table-column>
			<el-table-column
					prop="phones"
					label="手机号"
					width="200">
			</el-table-column>
			<el-table-column
					prop="type"
					:formatter="dFormatter"
					label="用户类型"
					width="200">
			</el-table-column>

			<el-table-column
					fixed="right"
					label="操作"
					width="300">
				<template slot-scope="scope">
					<el-button @click="dialogFormVisible = true" v-on:click="update_user(scope.row)"
					           type="primary" icon="el-icon-edit" size="small">修改
					</el-button>
					<el-button @click="delete_user(scope.row)" type="primary" icon="el-icon-delete" size="small">删除
					</el-button>
					<el-button @click="init_user(scope.row)" type="primary" size="small">重置密码</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:page-size="page_size"
				:current-page="current_page"
				:hide-on-single-page="true"
				@current-change="limit_user">
		</el-pagination>

		<el-dialog title="数据更新" :visible.sync="dialogFormVisible" width="30%">
			<el-form :model="form">
				<el-form-item label="用 户 名：" :label-width="formLabelWidth">
					<el-input v-model="form.user" autocomplete="off" style="width: 200px" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="手 机 号：" :label-width="formLabelWidth">
					<el-input v-model="form.phones" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="用户类型：" :label-width="formLabelWidth">
					<el-select v-model="type_value" placeholder="请选择" style="margin-right: 20px;width: 200px"
					           @change="update_chage">
						<el-option
								v-for="item in values"
								:key="item.value"
								:label="item.label"
								:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false" v-on:click="update_ok">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios from "axios";

export default {
	name: "userList",
	data() {
		return {
			tableData: [],
			user_type: [{
				type: 0,
				name: "普通用户",
			}, {
				type: 1,
				name: "管理员",
			}],
			page_size: 8,
			total: 1,
			current_page: 1,
			username: '',
			phone: '',
			loading: true,
			options: [{
				value: '-1',
				label: '所有用户'
			}, {
				value: '1',
				label: '管理员'
			}, {
				value: '0',
				label: '普通用户'
			}],
			values: [{
				value: '1',
				label: '管理员'
			}, {
				value: '0',
				label: '普通用户'
			}],
			type_value: "",
			value: '',
			dialogTableVisible: false,
			dialogFormVisible: false,
			form: {
				user: '',
				phones: '',
				password: '',
				user_type: -1
			},
			formLabelWidth: '120px',
			type: -1,
		}
	},
	methods: {
		update_user(data) {
			this.form.user = data.user;
			this.form.phones = data.phones;
			this.form.password = data.password;
			this.form.user_type = data.type === 1 ? 1 : 0;
			if (data.type === 1) {
				this.type_value = "管理员";
			} else if (data.type === 0) {
				this.type_value = "普通拥护";
			}
		},
		update_ok() {
			let _this = this;
			let user=this.form;
			axios.post("http://47.108.239.149:9000/api/updateUser",
					{
						user: user.user,
						type: user.user_type,
						phones: user.phones
					}).then(function (response) {
				_this.limit_user(_this.current_page)
			}).catch(function (reason) {
				alert("请求不可达");
			})
		},
		update_chage(val){
			this.form.user_type=val;
		},
		init_user(row) {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/updateUser",
					{
						user: row.user,
						phones: row.phones,
						password: _this.$md5("xinyun123456"),
						type: row.user_type
					})
		},
		delete_user(row) {
			let _this = this;
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get("http://47.108.239.149:9000/api/deleteUser?user="+row.user).then(function (response){
					_this.limit_user(_this.current_page);
				}).catch(function (response){
					alert("请求不可达")
				})
				_this.empty();
				this.$message({
					type: 'success',
					message: '删除成功!'
				});

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		dFormatter(row, column) {
			for (let type of this.user_type) {
				if (type.type == row.type) {
					return type.name
				}
			}
		},
		limit_user(val) {
			this.loading = true
			this.current_page = val;
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/selectUserLimit",
					{
						current: _this.current_page,
						size: _this.page_size,
						data: {
							user: _this.username,
							phones: _this.phone,
							type: _this.type
						}
					}
			).catch(function (response) {
				alert("请求不可达！");
			}).then(function (response) {
				_this.tableData = response.data.data;
				_this.total = response.data.total;
				_this.loading = false
			})
		},
		empty() {
			this.username = "";
			this.phone = "";
			this.value = "";
			this.type = -1;
			this.limit_user(1);
		},
		change(val) {
			if (val === "-1") {
				this.type = -1;
			} else if (val === "1") {
				this.type = 1;
			} else if (val === "0") {
				this.type = 0;
			}
		}
	},
	mounted() {
		this.limit_user(1);
	}

}
</script>

<style scoped>
.el-pagination {
	text-align: center;
	margin-top: 20px;
}

.el-table {
	text-align: center;
}
</style>
